<template>
  <div class='detail-logistics'>
    <p v-for="(item, index) in modelData0" :key="index">
      <span>{{item.label}}</span>
      <span>{{info[item.prop]}}</span>
    </p>
  
    <div class="more-info">
      <div class="logo pr">
        <span class="pa receive">收</span>
        <span class="line pa"></span>
        <span class="pa send">发</span>
      </div>
      <div class="ft14 content">
        <p v-for="(item, index) in modelData1" :key="index" v-if="!item.isInfo">
          <span>{{item.label}}：</span>
          <span>{{info[item.prop]}}</span>
        </p>
        <div v-else-if="item.isInfo" class="info">
          物流信息在这里
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  name: "",
  data() {
    return {
      modelData0:[
        {label:"物流公司：",prop:'company'},
        {label:"物流单号：",prop:'number'}
      ],
      modelData1:[
        {label:"收货人",prop:''},
        {label:"收货地址",prop:''},
        {label:"物流信息在这里",isInfo:true},
        {label:"发货人",prop:''},
        {label:"发货地址",prop:''},
      ],
      info:{}
    };
  },
  methods: {},
  created() {}
};
</script>
<style lang="scss" scoped>
.detail-logistics {

  >p{
    margin: 10px 0;
    line-height: 35px;

    span:nth-child(1){
      display: inline-block;
      width: 75px;
      text-align: right;
      font-size: 14px;
    }
  }
  .more-info{
    margin: 20px 0;
    display: flex;

    .logo{
      width: 40px;

      span{
        width: 30px;
        background-color: #eee;
        height: 30px;
        border-radius: 50%;
        text-align: center;
        line-height: 30px;
        color: #fff;
      }
      .receive{
        top: 10px;
      }
      .send{
        bottom: 10px;
      }

      .line{
        height: calc(100% - 25px);
        top: 10px;
        width: 5px;
        background-color: transparent;
        border-left: 2px dashed #eee;
        left: 14px;
      }
    }
    .content{
      p{
        line-height: 30px;
      }
    }
  }

  .info{
    margin: 5px 0
  }
}
</style>